<template>

  <div class="bigbox">
    <router-view></router-view>
    <div class="topbox">
      <div> <span class="bor"></span> 健康百科</div>
    <div>
    <router-link to="/add"><el-button type="primary">新增文章</el-button></router-link></div>
    </div>
    <!-- table -->
    <el-row style="height: 100%;background-color: rgb(255, 255, 255);border-radius: 20px;box-shadow: 0px 0px 10px #aaa;padding: 0 26px;">
    <el-col :span="24">
      <div class="ipt"><el-input ref='search' v-model="search" style="width:300px" placeholder="请输入文章标题"></el-input>&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="searchFn">搜索</el-button></div>
            <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="文章标题"
            header-align='center'
            align='center'
            width="350">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            label="缩略图"
            header-align='center'
            align='center'
            width="450"
            show-overflow-tooltip>
            <template slot-scope="prop">
                <el-avatar :src="prop.row.avatar"></el-avatar>
              </template>
          </el-table-column>
          <el-table-column
            label="作者"
            header-align='center'
            align='center'
            width="180">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            label="操作时间"
            header-align='center'
            align='center'
            width="220">
            <template slot-scope="scope">{{ scope.row.nime }}</template>
          </el-table-column>
          <el-table-column label="操作" 
            header-align='center'
            align='center'>
      <template slot-scope="scope">
        <el-button
          size="mini"
           @click="$router.push('/edit/'+scope.row.id)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
        </el-table>
        <div class="block">
    <!-- <span class="demonstration">完整功能</span> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100">
    </el-pagination>
  </div>
    </el-col>
    </el-row>
    <!-- table -->
  <Edit :diolog="dilogRow" v-if="sb"/> 
</div>
</template>

<script>
import axios from 'axios'
import bus from '../../utils/bus'
import { delById ,adddataApi} from '../../api/cmh'
import Edit from '../../components/yiyuanxinxi/ui/Edit.vue'
export default {
  components:{
    Edit
  },
data() {
      return {
        sb:false,
        dilogRow:{},
        page:1,//当前页
        pageSize:20,//一页显示20条
        total:0,//总条数
        input: '',
        // currentPage4: 1,
        search:'',
        tableData: [],
        multipleSelection: []
      }
    },
    methods:{
      handleSizeChange(val) {
        this.pageSize=val
        this.page=1
        this.getList()
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page=val
        this.getList()
        // console.log(`当前页: ${val}`);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(row) {
        // bus.$emit('msg',this.dilogRow)
        this.dilogRow=row
        console.log(this.dilogRow);
      },
      handleDel(id) {
        // console.log(id);
        delById({id:id}).then(res=>{
          console.log(res);
          if(res.code==201){
            this.getList()
          }
        })
      },
      getList(){
        // axios.get('/getzsgc',{search:this.search ,page:this.page,pageSize:this.pageSize}).then(({data:ret})=>{
        //     // console.log(ret);
        //     this.tableData=ret.data
        // })
     adddataApi({page:this.page,pageSize:this.pageSize}).then(({data:ret})=>{
        // console.log(ret);  
        this.tableData=ret
        this.total=ret.total
     })
      },
      searchFn(){
        // this.search
        let res=this.tableData.filter(item=>{
        // return item.name==this.$refs.search.value
        return item.date.indexOf(this.$refs.search.value)!=-1
      })
      this.tableData=res
      }
    },
    mounted(){
      this.getList()
      // console.log(this.dilogRow);
    }
}
</script>

<style lang="less" scoped>
*{
  text-align: initial; 
  line-height: 1px;
}
.topbox{
  width: 100%;
  height: 60px;
  // background-color: red; 
  display: flex;
  line-height: 60px;
  justify-content: space-between;
  >div{
    margin-right: 40px;
    font-size: 22px;
    margin-left: 40px;
    line-height: 36px;
  }
  .bor{
    width: 30px;
    height: 10px;
    background-color: blue;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 5px;
    border-radius: 25px;
  }
}
.ipt{
  margin: 20px 10px 0;
}


</style>